<template>
  <div class="register-pages">
    <main>
      <!-- 基础 -->
      <div class="form-block">
        <div class="block-title flex-align">选择基础信息</div>
        <van-cell-group>
          <van-field
            v-model="userForm.university"
            placeholder="请选择学校"
            @click="navTo('/university')"
            readonly
            right-icon="arrow"
          />
          <van-field
            v-model="userForm.college"
            placeholder="请选择学院"
            @click="showCollege = true"
            readonly
            right-icon="arrow"
          />
          <van-field
            v-model="userForm.major"
            placeholder="请选择专业"
            @click="showMajor = true"
            readonly
            right-icon="arrow"
          />
        </van-cell-group>
        <!-- 学院类型 -->
        <van-popup v-model="showCollege" position="bottom">
          <van-picker
            title="学院类型"
            show-toolbar
            :columns="collegeTypeList"
            @confirm="confirmCollege"
            @cancel="showCollege = false"
          />
        </van-popup>
        <!-- 专业类型 -->
        <van-popup v-model="showMajor" position="bottom">
          <van-picker
            title="专业类型"
            show-toolbar
            :columns="majorTypeList"
            @confirm="confirmMajor"
            @cancel="showMajor = false"
          />
        </van-popup>
      </div>
      <!-- 用户信息 -->
      <div class="form-block">
        <div class="block-title flex-align">输入用户信息</div>
        <van-cell-group>
          <van-field v-model="userForm.username" placeholder="请输入姓名" />
          <van-field
            v-model="userForm.password"
            maxlength="10"
            placeholder="请输入密码"
          />
          <van-field
            v-model="userForm.idNumber"
            maxlength="18"
            placeholder="请输入身份证号码"
            right-icon="arrow"
            readonly
            @touchstart.native.stop="showCard = true"
          />
          <van-number-keyboard
            :show="showCard"
            extra-key="X"
            close-button-text="完成"
            @blur="showCard = false"
            @input="onInput"
            @delete="onDelete"
          />
          <van-cell>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <div class="flex-align">
                <span class="custom-title">性别</span>
                <van-radio-group v-model="userForm.sex" direction="horizontal">
                  <van-radio name="1">男</van-radio>
                  <van-radio name="2">女</van-radio>
                </van-radio-group>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <!-- 手机号 -->
      <div class="form-block">
        <div class="block-title flex-align">输入手机号</div>
        <van-cell-group>
          <van-field
            v-model="userForm.phoneNumber"
            maxlength="11"
            placeholder="请输入手机号"
          >
            <template #button>
              <div
                class="send-code-btn"
                :class="{ allowed: userForm.phoneNumber.length == 11 }"
                v-if="count >= 60"
                @click="getConfirmCode"
              >
                获取验证码
              </div>
              <div v-else>{{ count }} s</div>
            </template>
          </van-field>
          <van-field v-model="checkCode" placeholder="请输入验证码" />
        </van-cell-group>
      </div>
    </main>
    <van-button type="info" class="register-btn" @click="toRegister">
      <van-loading type="spinner" size="18px" v-if="isRegister" />
      <span v-else>注册</span>
    </van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showCollege: false, //选择学院
      showMajor: false, //专业类型
      showCard: false,
      isRegister: false,
      collegeTypeList: ['计算机学院', '经济管理学院'],
      majorTypeList: ['软件工程', '网络工程'],
      count: 60,
      userForm: {
        username: '',
        password: '',
        idNumber: '',
        phoneNumber: '',
        sex: '',
        university: '',
        college: '',
        major: ''
      },
      checkCode: '',
      infoTips: {
        compNo: '请选择单位',
        compSpec: '请选择专业',
        personType: '请选择人员类型',
        name: '请输入姓名',
        idcard: '请输入身份证号码',
        healthCertificate: '请输入健康证号码',
        startDate: '请选择健康证起始效期',
        endDate: '请选择健康证截止效期',
        sex: '请选择性别',
        telphone: '请输入手机号',
        checkCode: '请输入短信验证码'
      }
    }
  },
  created() {},
  destroyed() {
    this.$store.commit('handUnit', {}) //清空选择的单位
  },
  methods: {
    onInput(e) {
      if (this.userForm.idNumber.length < 18) {
        this.userForm.idNumber += e.toString()
      }
    },
    onDelete(e) {
      if (this.userForm.idNumber.length > 0) {
        this.userForm.idNumber = this.userForm.idNumber.slice(
          0,
          this.userForm.idNumber.length - 1
        )
      }
    },
    //获取验证码
    getConfirmCode() {
      if (!this.userForm.phoneNumber.length) {
        this.$toast('请输入手机号')
      } else if (isPhone(this.userForm.phoneNumber)) {
        this.$toast('手机号码不规范')
      } else {
        this.showCode = true
      }
    },
    //去注册
    toRegister() {
      //必填验证
      for (var key in this.queryForm) {
        if (key == 'data') {
          const data = this.queryForm[key]
          for (var i in data) {
            if (!data[i] && data[i] !== 0) {
              if (this.infoTips[i]) {
                this.$toast(this.infoTips[i])
                return
              }
            } else {
              if (this.queryForm.idcard.length != 18) {
                this.$toast('身份证号码应为18位')
                return
              } else {
                const idCardReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
                if (!idCardReg.test(this.queryForm.idcard)) {
                  this.$toast('身份证号码不规范')
                  return
                }
              }
            }
          }
        } else {
          if (!this.queryForm[key] && this.queryForm[key] !== 0) {
            if (this.infoTips[key]) {
              this.$toast(this.infoTips[key])
              return
            }
          } else {
            if (
              !/^1[34578]\d{9}$/.test(Number(this.queryForm.telphone)) &&
              this.queryForm.telphone
            ) {
              this.$toast('手机号码不规范')
              return
            }
          }
        }
      }
      this.isRegister = true
      console.log('注册成功')
      //   register(this.userForm)
      //     .then(res => {
      //       this.isRegister = false
      //       const { success, value } = res
      //       if (res.success) {
      //         // this.queryForm.checkCode = value;
      //         this.$store.dispatch('handUnit', {})
      //         this.$toast(value || '注册成功')
      //         setTimeout(() => {
      //           this.$router.push('/login')
      //         }, 500)
      //       } else {
      //         this.$toast(res.exceptionContent || '注册失败')
      //       }
      //     })
      //     .catch(err => {
      //       this.isRegister = false
      //       this.$toast('注册失败,请联系管理员处理！')
      //     })
    },
    //获取专业
    // getCollege() {
    //   queryProfessionDataList({}).then(res => {
    //     this.majorList = res.value
    //     try {
    //       //默认展示第一个
    //       this.majorChildList = res.value[0].childList
    //       this.bigActive = res.value[0].professionCode
    //     } catch (e) {
    //       console.log(e)
    //     }
    //   })
    // },
    // //获取人员类型
    // getMajor() {
    //   queryDicList({
    //     module: 'xnrh-zczl', //xnrh-yhzx
    //     type: 'personType'
    //   }).then(res => {
    //     const resVal = res.value || []
    //     this.personTypeMap = resVal
    //     resVal.map(item => {
    //       this.personTypeList.push(item.text)
    //     })
    //   })
    // },
    //确认选择学院
    confirmCollege(value) {
      this.userForm.college = value
      //   if (!this.row.professionCode) {
      //     this.$toast('请选择您的专业类别')
      //     return
      //   }
      this.showCollege = false
      //   this.queryForm.data.compSpec = this.row.professionCode
      //   this.majorName = this.row.professionName
    },
    //确认选择专业类型
    confirmMajor(value, index) {
      this.showMajor = false
      this.userForm.major = value
      //   this.personTypeName = value
      //   this.queryForm.data.personType = this.personTypeMap[index].code
      //   this.queryForm.roles = [this.personTypeMap[index].code]
    },
    navTo(path) {
      if (path) {
        this.$router.push(path)
      }
    }
    //校验选择其他套餐
    // block1() {
    //   return (
    //     this.queryForm.data.compNo &&
    //     this.queryForm.data.compSpec &&
    //     this.queryForm.data.personType
    //   )
    // },
    // //校验输入身份信息
    // block2() {
    //   return (
    //     this.queryForm.data.name &&
    //     this.queryForm.idcard &&
    //     this.queryForm.data.sex &&
    //     this.queryForm.data.healthCertificate &&
    //     this.queryForm.data.startDate &&
    //     this.queryForm.data.endDate
    //   )
    // },
    // //校验输入手机号码
    // block3() {
    //   return this.queryForm.telphone && this.queryForm.checkCode
    // }
  }
}
</script>

<style lang="scss" scoped>
.register-pages {
  padding-bottom: 60px;

  .van-cell-group {
    padding: 4px 0;
    border-radius: 5px;
    border: 1px solid rgba(214, 219, 226, 0.5);
  }

  main {
    padding: 18px 16px;

    .form-block {
      margin-bottom: 18px;
    }

    .block-title {
      font-size: 16px;
      font-weight: 600;
      color: rgba(46, 47, 49, 0.8);
      margin-bottom: 8px;
    }

    .send-code-btn {
      font-size: 15px;
      // font-weight: 350;
      color: rgba(0, 0, 0, 0.4);
    }

    .allowed {
      color: #1990ff;
    }
  }

  .register-btn {
    width: 90%;
    margin: 25px auto;
    display: block;
  }
  .flex-align {
    color: #a8a9ab;
  }
}
</style>
